<template>
  <div class="app-container">follow</div>
</template>
<script setup name="Follow">
import { userFollow } from "@/api/user/index";
import { ref } from "vue";

onMounted(() => {
  const route = useRoute();
  const { proxy } = getCurrentInstance();
  const search = ref("");
  const total = ref("0");
  const loading = ref(true);

  // 获取用户的选中
  const multipleSelection = ref("");

  console.log(route)
  const queryParams = reactive({
    USER_ID: route.params.userId,
    current: 1,
    size: 10,
  });

  // 用户数据列表
  const tableData = ref([]);
  // 获取用户数据列表
  function getList() {
    loading.value = true;
    userFollow(queryParams).then((response) => {
      console.log("response.data", response.data);
      total.value = response.data.total;
      tableData.value = response.data.records;
      loading.value = false;
    }).catch(err => {
        console.log(err)
    });
  }

  /** 用户状态修改 */
  function handleStatusChange(row) {
    console.log(row.accountStatus);
    let text = row.accountStatus === "2" ? "启用" : "停用";
    proxy.$modal
      .confirm('确认要"' + text + '""' + row.displayName + '"用户吗?')
      .then(function () {
        // return changeRoleStatus(row.userId, row.accountStatus);
      })
      .then(() => {
        proxy.$modal.msgSuccess(text + "成功");
      })
      .catch(function () {
        row.accountStatus = row.accountStatus === "1" ? "2" : "1";
      });
  }

  /** 搜索按钮操作 */
  function handleQuery() {
    queryParams.current = 1;
    getList();
  }
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    getList();
  }
  getList();
});
</script>
<style lang="scss">
.layout-content {
  .table-bottom {
    position: relative;
    margin-top: 50px;
    .setButton {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
    .setLikedButton {
      position: absolute;
      top: 0;
      left: 110px;
      display: flex;
      justify-content: center;

      width: 100px;
      text-align: center;
    }
  }
}
.modelInfoDialog {
  position: relative;
  margin-top: -30px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  padding: 30px 0;
  @media screen and (max-width: 1024px) {
    padding: 15px 0;
  }
  li {
    padding: 12px 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: space-between;
    span,
    strong {
      display: block;
    }
  }
}
.modelShareDialog {
  h5 {
    font-size: 16px;
  }
  .el-row {
    margin-bottom: 15px;
    .img {
      padding: 5px;
      box-sizing: border-box;
      background-color: #fff;
      img {
        max-width: 100%;
        height: auto;
        max-width: 150px;
      }
    }
  }
}
</style>
